<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.util.List" %>
<%@ page import="slh.movie.Movie" %>
<%@ page import="slh.Book.Book" %>

<style>
    /* 豆瓣风基础样式 */
    * {
        font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        color: #333;
        box-sizing: border-box;
    }

    body {
        background-color: #f5f5f5;
        margin: 20px;
    }

    .content-container {
        max-width: 1200px;
        margin: 0 auto;
        background-color: white;
        border-radius: 12px;
        box-shadow: 0 2px 15px rgba(0,0,0,0.05);
        padding: 30px 40px;
    }

    /* 头部栏样式 */
    .search-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
    }

    .search-title {
        font-size: 28px;
        font-weight: 500;
        color: #2f2f2f;
        border-bottom: 3px solid #1b74e4;
        padding-bottom: 8px;
    }

    /* 筛选菜单样式 */
    .filter-group {
        display: flex;
        gap: 10px;
    }

    .filter-btn {
        background-color: #f5f5f5;
        color: #333;
        padding: 8px 20px;
        border: none;
        border-radius: 20px;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.3s;
    }

    .filter-btn.active {
        background-color: #1b74e4;
        color: white;
    }

    .filter-btn:hover:not(.active) {
        background-color: #e0e0e0;
    }

    /* 瀑布流布局 */
    .masonry-grid {
        column-count: 4;
        column-gap: 25px;
    }

    /* 豆瓣卡片样式 */
    .douban-card {
        break-inside: avoid;
        background-color: white;
        border-radius: 10px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        margin-bottom: 25px;
        transition: transform 0.3s ease;
    }

    .douban-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 3px 8px rgba(0,0,0,0.15);
    }

    .card-cover {
        width: 100%;
        height: 280px;
        object-fit: cover;
        border-radius: 10px 10px 0 0;
    }

    .card-info {
        padding: 18px;
    }

    .card-title {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 8px;
        height: 40px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .card-meta {
        font-size: 12px;
        color: #666;
        margin-bottom: 5px;
    }

    .rating-group {
        display: flex;
        align-items: center;
        font-size: 14px;
    }

    .star-icon {
        color: #f1b44c;
        margin-right: 3px;
    }

    .tag-movie {
        color: #1b74e4;
        font-size: 12px;
        padding: 2px 6px;
        border: 1px solid #1b74e4;
        border-radius: 15px;
        margin-left: 10px;
    }

    .tag-book {
        color: #82589f;
        border-color: #82589f;
    }

    /* 响应式调整 */
    @media (max-width: 1024px) {
        .masonry-grid {
            column-count: 3;
        }
    }

    @media (max-width: 768px) {
        .content-container {
            padding: 20px;
        }

        .masonry-grid {
            column-count: 2;
        }

        .card-cover {
            height: 240px;
        }

        .search-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 15px;
        }
    }

    @media (max-width: 480px) {
        .masonry-grid {
            column-count: 1;
        }
    }
</style>

<div class="content-container">
    <div class="search-header">
        <h1 class="search-title">搜索结果</h1>
        <div class="filter-group">
            <button class="filter-btn active" data-type="all">全部</button>
            <button class="filter-btn" data-type="movie">电影</button>
            <button class="filter-btn" data-type="book">图书</button>
        </div>
    </div>

    <div class="masonry-grid" id="result-grid">
        <%
            List<Object> results = (List<Object>) request.getAttribute("results");
            if (results == null || results.isEmpty()) {
        %>
        <div class="no-results" style="width: 100%; text-align: center; padding: 60px; color: #999;">
            <p>很抱歉，没有找到相关结果</p>
            <p>试试换个关键词搜索？</p>
        </div>
        <%
        } else {
            for (Object item : results) {
                if (item instanceof Movie) {
                    Movie movie = (Movie) item;
        %>
        <div class="douban-card" data-type="movie">
            <a href="movieDetail?id=<%= movie.getMovieId() %>">
                <img src="<%= movie.getCoverImage() %>" alt="<%= movie.getTitle() %>" class="card-cover">
                <div class="card-info">
                    <h3 class="card-title"><%= movie.getTitle() %></h3>
                    <div class="card-meta"><%= movie.getDirector() %> / <%= movie.getReleaseDate() %></div>
                    <div class="rating-group">
                        <span class="star-icon">&#9733;</span>
                        <%= movie.getScore() %>
                        <span class="tag-movie">电影</span>
                    </div>
                </div>
            </a>
        </div>
        <%
        } else if (item instanceof Book) {
            Book book = (Book) item;
        %>
        <div class="douban-card" data-type="book">
            <a href="bookDetail?id=<%= book.getBookId() %>">
                <img src="<%= book.getCoverImage() %>" alt="<%= book.getTitle() %>" class="card-cover">
                <div class="card-info">
                    <h3 class="card-title"><%= book.getTitle() %></h3>
                    <div class="card-meta"><%= book.getAuthor() %> / <%= book.getPublisher() %></div>
                    <div class="rating-group">
                        <span class="star-icon">&#9733;</span>
                        <%= book.getScore() %>
                        <span class="tag-book">图书</span>
                    </div>
                </div>
            </a>
        </div>
        <%
                    }
                }
            }
        %>
    </div>
</div>

<script>
    // 获取筛选按钮和结果网格
    const filterButtons = document.querySelectorAll('.filter-btn');
    const resultGrid = document.getElementById('result-grid');
    const noResultsMsg = document.querySelector('.no-results');

    // 为每个筛选按钮添加点击事件
    filterButtons.forEach(button => {
        button.addEventListener('click', () => {
            // 更新按钮状态
            filterButtons.forEach(btn => btn.classList.remove('active'));
            button.classList.add('active');

            // 获取筛选类型
            const filterType = button.getAttribute('data-type');

            // 获取所有卡片
            const cards = document.querySelectorAll('.douban-card');

            // 记录是否有可见卡片
            let hasVisibleCards = false;

            // 筛选卡片
            cards.forEach(card => {
                const cardType = card.getAttribute('data-type');
                if (filterType === 'all' || filterType === cardType) {
                    card.style.display = 'block';
                    hasVisibleCards = true;
                } else {
                    card.style.display = 'none';
                }
            });

            // 显示或隐藏无结果提示
            if (noResultsMsg) {
                noResultsMsg.style.display = hasVisibleCards ? 'none' : 'block';
            }
        });
    });
</script>